<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">{{ data.text }}</span>
            <div class="editor-title__sub-text">
                主要用于展示图片广告，图片可拖动排序，<strong>图片要圆角的话建议在制作时不要做成圆角图片，在下方“图片圆角”中去调整图片圆角大小。</strong>
            </div>
        </div>
        <div class="img-btn-con" style="padding: 16px 20px">
            <div style="padding-bottom: 1rem">
                <div class="label-con" style="width: auto; margin-bottom: 16px">{{ styleText[data.style.type - 1] }}</div>
                <draggable v-model="data.data.data" animation="200" item-key="photo_id">
                    <template #item="{ element, index }">
                        <div @mouseover="element.showClose = true" @mouseout="element.showClose = false">
                            <div style="position: relative">
                                <div class="cls-flex item-con">
									<el-upload v-if="data.data.data.length < 10"
									    ref="uploadRef"
									    :limit="10"
									    class="better-img"
										
										:show-file-list="false"
									    :action="actionImgUrl()"
									    :http-request="uploadImgs"
									>
									    <div class="left-img" @click="change_img(index)">
									        <img class="left-img" :src="element.url" v-if="element.url" />
									        <div class="left-img cls-center" style="background-color: #f6f6f6" v-else>
									            <el-icon size="25px" color="#E1E4E7">
									                <PictureFilled />
									            </el-icon>
									        </div>
									        <div class="tip-con">{{ element.url ? "更换图片" : "添加图片" }}</div>
									    </div>
									</el-upload>
                                    
                                    <div class="cls-between right-box cls-column">
                                        <div class="right-one cls-flex" style="width: 100%">
                                            <div style="width: 3rem; flex: none">名称</div>
                                            <el-input v-model="element.title" placeholder="建议10个字以内" style="width: 192px" clearable />
                                        </div>
                                        <div class="right-one cls-flex" style="width: 100%; flex-flow: row wrap; margin-top: 6px">
                                            <div style="width: 3rem; flex: none">链接</div>
                                            <div
                                                v-if="element.link == undefined || element.link == ''"
                                                class="better-link__text"
                                                @click="page_click(element, index)"
                                            >
                                                选择链接页面<el-icon>
                                                    <ArrowDown />
                                                </el-icon>
                                            </div>
                                            <template v-else>
                                                <div class="better-link__active flexs">
                                                    <div class="better-link__active-info flexs">
                                                        <p class="better-link__active-name line-one">{{ element.link.urlText }}</p>
                                                        <el-icon @click.stop="element.link = ''" style="color: #4b93fa">
                                                            <CloseBold />
                                                        </el-icon>
                                                    </div>
                                                    <p class="better-link__text" @click="page_click(element, index)">
                                                        修改<el-icon>
                                                            <ArrowDown />
                                                        </el-icon>
                                                    </p>
                                                </div>
                                                <div class="better-xcx" v-if="element.link.type === 'xcx'">
                                                    <p class="line-one">小程序AppID：{{ element.link.appid }}</p>
                                                    <p class="line-one" style="margin-top: 4px">小程序路径：{{ element.link.page_url }}</p>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </draggable>
            </div>
            <div style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1; width: auto">
                    选择模板 <span class="label-span">{{ styleArrs[data.style.type - 1].text }}</span>
                </div>
                <div class="style-list">
                    <div
                        :class="[index == data.style.type - 1 ? 'style-item-active' : '', 'style-item cls-center']"
                        v-for="(item, index) in styleArrs"
                        :key="index"
                        @click.stop="clickStyle(item, index)"
                        :title="item.text"
                    >
                        <i class="i-icon" :style="{ backgroundImage: `url(${item.img})` }"></i>
                    </div>
                </div>
            </div>
            <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">图片间距</div>
                <div class="cls-between">
                    <div
                        class="item-con"
                        style="padding: 7px 14px; margin-bottom: 0"
                        :class="!data.style.showSpac ? 'item-con-active' : ''"
                        @click="data.style.showSpac = false"
                    >
                        无
                    </div>
                    <div
                        class="item-con"
                        style="padding: 7px 14px; margin-bottom: 0"
                        :class="data.style.showSpac ? 'item-con-active' : ''"
                        @click="data.style.showSpac = true"
                    >
                        有
                    </div>
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">页面边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-left']" :max="max" @change="padding_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-left']" @input="padding_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">图片圆角</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['border-radius']" :max="max" @change="radius_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['border-radius']" @input="radius_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-top']" :min="0" :max="300" @change="mtt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-top']" @input="mtt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-bottom']" :min="0" :max="300" @change="mtb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-bottom']" @input="mtb_change" />
                </div>
            </div>
        </div>
    </div>

    <!-- 图片库 -->
    <picture-library :show="showImg" @close="showImg = false" @select="selectImg" :select_multiple="false"> </picture-library>

   <PageDialog
        :names="PageDialogIndex"
        :show="showPage"
        :show-new-list="true"
        :show-jump-xcx="true"
        @close="showPage = false"
        @names="get_names"
        @change="page_change"
    ></PageDialog>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from "vue"
import { PictureFilled, CloseBold, ArrowDown } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import draggable from "vuedraggable"
import PageDialog from "@components/PageDialog.vue"
import EventBus from "@common/event-bus" // EventBus事件总线，任意组件通信

import s1 from "@assets/design/s1.png"
import s3 from "@assets/design/s3.png"
import s4 from "@assets/design/s4.png"
import s5 from "@assets/design/s5.png"

const { proxy } = getCurrentInstance()
const max = 30 // 最大值，适用于内外边距和圆角

import UploadImg from "@/mixins/upload-img";
const uploadRef = ref(null);
	const {
	    succList,
	    imgLoading,
	    handlePreview,
	    actionImgUrl,
	    uploadImgAssembly,
	} = UploadImg();

onBeforeUnmount(() => {
    // 取消监听
    EventBus.off("page_dialog_objs")
})

/**
 * 图片广告
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 9,
            type_name: "img_ad",
            text: "图片广告",
            style: {
                type: 1, // 1是一行一个，2是一行两个，3是一行三个，4是一左二右
            },
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                data: [],
            },
        },
    },
})

onMounted(() => {})

const PageDialogIndex = ref("0")
const get_names = (val) => {
    PageDialogIndex.value = String(val)
}

/**
 * 页面跳转选择
 * @param {Number} imgIdx.value 数组索引
 * @param {Number} page_id 页面跳转ID
 */
const showPage = ref(false)
const page_change = (link) => {
    props.data.data.data[imgIdx.value].link = link
    props.data.data.data[imgIdx.value].title = link.urlText
    props.data.data.data[imgIdx.value].page_dialog_index = PageDialogIndex.value
    showPage.value = false
    // let img = props.data.data.data[imgIdx]
    // let page_index = pageArr.value.findIndex((item) => item.decorate_id == page_id)
    // img.pageTitle = page_index > -1 ? pageArr.value[page_index].title : ""
}
const page_click = (item, index) => {
    imgIdx.value = index
    PageDialogIndex.value = item.page_dialog_index || "0"
    showPage.value = true
    EventBus.emit("page_dialog_objs", item)
}

// 图片样式
const styleArrs = ref([
    {
        text: "一行一个",
        img: s1,
        type: 1,
    },
    {
        text: "一行两个",
        img: s3,
        type: 2,
    },
    {
        text: "一行三个",
        img: s4,
        type: 3,
    },
    {
        text: "一左二右",
        img: s5,
        type: 4,
    },
])
const styleText = [
    "建议宽度750像素",
    "建议宽度368px或184px的倍数，建议添加宽高比例一致的图片",
    "建议宽度250像素，建议添加宽高比例一致的图片",
    "建议左侧大图、右侧两图宽度368px或184px的倍数，右侧两图高度分别为左侧图片高度的一半",
]
const clickStyle = (item, index) => {
    props.data.style.type = item.type
    props.data.style.img_height = item.type == 4 ? 375 : ""
    let arrs = props.data.data.data
    let newarrs = []
    switch (item.type) {
        case 1:
            newarrs.push(props.data.data.data[0])
            props.data.data.data = newarrs
            break
        default:
            let len = item.type == 2 ? 2 : 3
            for (let i = 0; i < len; i++) {
                newarrs.push({
                    name: arrs[i] ? arrs[i].name : "",
                    url: arrs[i] ? arrs[i].url : "",
                    page_id: "",
                    pageTitle: "",
                })
            }
            props.data.data.data = newarrs
            break
    }
}

// 图标选择
const showImg = ref(false)
const imgIdx = ref(-1)
const selectImg = (val) => {
    showImg.value = false
    let imgObj = {
        url: proxy.imgUrl + val[0].photo,
        name: val[0].name,
        page_id: "",
        pageTitle: "",
    }

    if (imgIdx.value != -1) {
        props.data.data.data[imgIdx.value].url = proxy.imgUrl + val[0].photo
        props.data.data.data[imgIdx.value].name = val[0].name
        imgIdx.value = -1
    } else {
        props.data.data.data.push(imgObj)
    }

    // 动态获取图片高度，适用于type：4，一左二右结构
    if (props.data.style.type == 4 && props.data.data.data[0].url) {
        let new_imgs = new Image()
        new_imgs.src = props.data.data.data[0].url
        new_imgs.onload = function () {
            props.data.style.img_height = new_imgs.height
        }
    }
}

/**
 * 更换图片
 * @param {int} index 索引
 */
const change_img = (index) => {
    imgIdx.value = index
}
function uploadImgs(e){
	uploadImgAssembly(e,res=>{
		console.log("img",res)
		let imgObj = {
		    url: res.url,
		    name: res.name,
		    page_id: "",
		    pageTitle: "",
		}
		
		if (imgIdx.value != -1) {
		    props.data.data.data[imgIdx.value].url = res.url
		    props.data.data.data[imgIdx.value].name = res.name
		    imgIdx.value = -1
		} else {
		    props.data.data.data.push(imgObj)
		}
		
		// 动态获取图片高度，适用于type：4，一左二右结构
		if (props.data.style.type == 4 && props.data.data.data[0].url) {
		    let new_imgs = new Image()
		    new_imgs.src = props.data.data.data[0].url
		    new_imgs.onload = function () {
		        props.data.style.img_height = new_imgs.height
		    }
		}
	})
	
}

// 页面边距变化
const padding_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["margin-left"] = props.data.rpxStyle["margin-right"] = Number(val)
}

// 上下边距
const mtt_change = (val) => {
    props.data.rpxStyle["margin-top"] = Number(val)
}
const mtb_change = (val) => {
    props.data.rpxStyle["margin-bottom"] = Number(val)
}

// 圆角变化
const radius_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["border-radius"] = Number(val)
}
</script>

<style lang="less" scoped>
.better-xcx {
    width: 100%;
    flex: none;
    background-color: @gray-1;
    border-radius: @radius-xs;
    padding: @padding-xs;
    font-size: @font-size-sm;
    margin-top: 8px;
}
.better-link__text {
    line-height: @line-height-md;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #4b93fa;
    font-size: 12px;
    .el-icon {
        margin-left: @margin-base;
    }
}

.better-link__active {
    flex: 1;
    overflow: hidden;
    color: @themes;
    font-size: @font-size-sm;

    .better-link__active-info {
        flex: 1;
        border: 1px solid @themes;
        border-radius: @radius-sm;
        background-color: #e0edff;
        padding: 2px 4px;
        margin-right: @margin-sm;
        overflow: hidden;

        .better-link__active-name {
            flex: 1;
            margin-right: @margin-xs;
        }

        .el-icon {
            flex: none;
            cursor: pointer;
        }
    }
}
.style-list {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-top: 10px;

    .style-item {
        width: 40px;
        flex: none;
        text-align: center;
        height: 40px;
        font-size: 12px;
        border-radius: 2px;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid #ebedf0;
        margin-right: 10px;

        &:hover .i-icon {
            background-position: 0 32px;
        }
    }

    .style-item-active {
        border: 1px solid #4b93fa;
        background-color: #e0edff;

        .i-icon {
            background-position: 0 32px;
        }
    }

    .i-icon {
        display: inline-block;
        background-position: 0 0;
        padding-top: 0;
        height: 32px;
        width: 32px;
        background-size: cover;
    }
}

.label-span {
    margin-left: 12px;
    color: #111;
}

.item-con {
    padding: 12px 10px;
    margin-bottom: 14px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgb(10 42 97 / 20%);

    .left-img {
        width: 60px;
        height: 60px;
        flex: none;
        cursor: pointer;
        position: relative;
    }

    .right-box {
        overflow: hidden;
        padding-left: 10px;
        min-height: 60px;

        .right-one {
            width: 100%;
            overflow: hidden;
        }
    }
}

.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}

.el-button + .el-button {
    margin-left: 0 !important;
}

.el-button {
    border-radius: 0 !important;
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: #969799;

    .label-con__span {
        font-size: 13px;
        color: #999;
    }
}

.tip-con {
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px;
    width: 60px;
    text-align: center;
}
</style>
